<template>
<h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片：</td>
      <td><img :src="person.img_url" width="100px"></td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul><li v-for="item in person.friends">{{item}}</li></ul>
      </td>
    </tr>
  </table>
  
  <button @click="detail">点我显示详细信息</button>
</template>
<script setup>
import {ref} from "vue";

const person = ref({
  img_url:'',
  name:'',
  age:'',
  friends:[]

})
const detail = ()=>{
  person.value = {
    name:'范传奇',
    age:'12',
    img_url:'fcq.jpg',
    friends:['张三','李四','王五','赵六','钱七']
  }
}
</script>


<style scoped>

</style>